<!--
 * @Author: huangyq
 * @Date: 2022-04-02 11:04:10
 * @LastEditTime: 2023-12-06 10:23:45
 * @LastEditors: hyq
 * @Description: your description
 * @FilePath: /vue3-boilerplate-pc-client/src/views/pages/index.vue
-->
<template>
  <el-container>
    <el-aside :width="isCollapse ? '64px' : '180px'">
      <hq-sidebar
        :menus="permissionStore.effectiveRouters"
        :is-collapse="isCollapse"
      ></hq-sidebar>
    </el-aside>
    <el-container direction="vertical" class="layout">
      <hq-breadcrumb @on-collapse="v => (isCollapse = v)"></hq-breadcrumb>
      <el-container direction="vertical">
        <hq-alive-tag></hq-alive-tag>
        <el-main>
          <keep-alive-wrapper class="qt-page"></keep-alive-wrapper>
        </el-main>
      </el-container>
    </el-container>
  </el-container>
</template>
<script lang="ts" setup>
import HqSidebar from './components/hq-sidebar/index.vue'
import HqBreadcrumb from './components/hq-breadcrumb/index.vue'
import HqAliveTag from './components/hq-alive-tag/index.vue'
import { usePermissionStore } from '@/stores'
import { ref } from 'vue'

const permissionStore = usePermissionStore()
const isCollapse = ref<boolean>(false)
</script>
<style lang="scss" scoped>
.el-container {
  width: 100%;
  height: 100%;
  background-color: #efefef;
  overflow: hidden;
  .el-main {
    padding: 20px;
    display: flex;
    .qt-page {
      flex: 1;
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }
  }
}
</style>
